<script setup>
// import { useMessageStore } from '@/stores/message.js'
import axios from 'axios'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import post from '@/utils/http.js'

let responce = ref({})

post('/user', { name: '小田', age: 16 })



// axios({
//   method: 'post',
//   url: 'http://192.168.31.210:3000/user',
//   data: { name: '小田', age: 16 }
// }).then((res) => {
//   responce.value = res.data
// })
let list = reactive([])
// axios({
//   method: 'get',
//   url: 'http://192.168.31.210:3000/user/list'
// }).then((res) => {
//   list = res.data
// })


const router = useRouter()
function handelPersonal() {
  router.push('/personal')
}
function handelItem() {
  router.push('/personal')
}
let arrItem = ['服务', '支付', '收藏', '设置']
</script>

<template>
  <div class="page">
    <p style="text-align: center">个人中心</p>
    <header @click="handelPersonal()">
      <img src="../assets/头像.webp" alt="">
      <div class="account">
        <p>小田好甜</p>
        <div id="id">账号：h54765787</div>
      </div>
      <van-icon name="setting-o" size="30" />
    </header>
    <main>
      <div class="service" @click="handelItem" v-for="item in arrItem" :key="item">{{ item }}</div>
      <!-- <div class="service" @click="handelItem">服务</div>
      <div class="service" @click="handelItem">支付</div>
      <div class="service" @click="handelItem">收藏</div>
      <div class="service" @click="handelItem">设置</div> -->
    </main>
    <!-- <section>我赞了{{ store.count }}次</section>
  <div>{{ responce.name }}{{ responce.age }}</div>
  <div>{{ list.join('、') }}</div> -->
  </div>
</template>

<style lang="less" scoped>
.page {
  height: 100vh;
  background-color: #ede9e9e0;

  p {
    margin: 0;
    padding: 10px;
  }

  header {
    width: 100%;
    height: 18vh;
    display: flex;
    background-color: #fff;

    img {
      height: 80%;
      margin: 15px;
      border-radius: 10px;
    }

    p {
      font-size: 20px;
      font-weight: bold;

    }

    #id {
      margin: 0;
      font-size: 18px;
    }

    :nth-child(3) {
      flex: 1;
      text-align: center;
      line-height: 144px;
    }

  }

  main {
    height: 20%;
    margin: 10px 0;


    .service {
      background-color: #fff;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      &::after {
        content: ">";

      }
    }


  }
}
</style>
